<template>
  <div class="schema-content" v-bind="$attrs">
    <template v-if="data.type==='array'">
      <schema-array
        :prefix="name"
        :data="data"
        :editor-id="editorId"
        :disabled="disabled"
      />
    </template>
    <template v-if="data.type==='object'">
      <schema-object
        :prefix="nameArray"
        :data="data"
        :editor-id="editorId"
        :disabled="disabled"
      />
    </template>
  </div>
</template>
<script>
import { computed, defineComponent, reactive, toRefs } from 'vue'
import SchemaObject from './SchemaObject.vue'
import SchemaArray from './SchemaArray.vue'

export default defineComponent({
  name: 'SchemaJson',
  components: {
    'schema-array': SchemaArray,
    'schema-object': SchemaObject
  },
  inheritAttrs: false,
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    editorId: {
      type: String,
      default: 'editor_id'
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const state = reactive({
      name: [],
    })
    const nameArray = computed(() => {
      return [].concat(state.name, 'properties')
    })
    return {
      ...toRefs(state),
      nameArray,
    }
  }
})
</script>
